<template>
  <main-frame :location="prop.location">
    <template slot="mainFrame">
      <div class="index-wrapper">
        <!-- <el-row :gutter="10">
          <el-col :span="6">
            <el-card>
              <div class="item project">
                <div>当前日访问量</div>
                <div>{{data.toDay}}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="item previewDay">
                <div>当前周访问量</div>
                <div>{{data.week}}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="item previewWeek">
                <div>当前月访问量</div>
                <div>{{data.month}}</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="item previewMotho">
                <div>总访问量</div>
                <div>{{data.allCount}}</div>
              </div>
            </el-card>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col>
            <div ref="echartMain" class="echartMain"></div>
          </el-col>
        </el-row>
      </div>
    </template>
  </main-frame>
</template>
<script>
let echarts = require("echarts");
export default {
  data() {
    return {
      prop: {
        location: "系统首页"
      },
      data: {},
      url: {
        list: "/task/count"
      },
      echartOption: {
        tooltip: {
          formatter: "{b0}: {c0}",
          trigger: "axis",
          alwaysShowContent:true
        },
        xAxis: {
          type: "category",
          data: [],
          name: "时间段"
        },
        yAxis: {
          type: "value",
          name: "销售额"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        series: [
          {
            data: [],
            type: "line",
            label:{
                show:true
            }
          }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    initEchart() {
      let myChart = echarts.init(this.$refs.echartMain);
      myChart.setOption(this.echartOption);
      myChart.resize();
    },
    initData() {
      this.$get(this.url.list, {}).then(res => {
        this.data = res.data;
        this.echartOption.series[0].data = res.data.list;
        this.echartOption.xAxis.data = res.data.morthlist;
        this.initEchart();
      });
    }
  }
};
</script>
<style lang="less" scope>
.index-wrapper {
  padding-top: 20px;
  .el-card .item {
    display: flex;
    flex-direction: row;
  }
  .el-card .item div {
    width: 50%;
  }
  .el-card .item div:nth-child(2) {
    text-align: center;
  }
  .echartMain {
    width: 100%;
    height: 500px;
  }
}
</style>